<template>
  <div class="my-income-layout">
    <snackbar style-color="#4A4A4A"
              back-color="#ffffff"
              status-color="#ffffff"
              :fixed="true">
      <template slot="slot">
      </template>
    </snackbar>
    <div>
            <div class="pass">
              <div class="pass_text">
                <span>旧密码:</span>
              </div>
              <input class="pass_input">
            </div>
            <div class="pass">
              <div class="pass_text">
                <span>新密码:</span>
              </div>
              <input class="pass_input">
            </div>
            <div class="pass">
              <div class="pass_text">
                <span>密码确认:</span>
              </div>
              <input class="pass_input">
            </div>
          </div>

    <div class="bottom-layout">
      <span class="rests-btn">保存修改</span>
      <!-- <span class="add-btn">新增</span> -->
    </div>
  </div>
</template>

<script>
  export default {
    name: 'income',
    data() {
      return {
        active: null
      }
    }
  }
</script>

<style lang="scss" scoped>

  .my-income-layout {
    width: 100%;
    height: 100vh;
    background-color: #FFFFFF;
    .top-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid rgba(219, 219, 219, 0.5);
      width: 100vw;
      background-color: white;

      .tebs-layout {
        width: 100vw;
      }
    }

    .bottom-layout {
      position: fixed;
      bottom: 0px;
      width: 100vw;
      height: 47px;
      display: flex;
      flex-direction: row;


      .rests-btn {
        width: 100vw;
        height: 47px;
        background: linear-gradient(221deg, #7ED785 0%, #64C367 100%);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-top: 1px solid rgba(221, 220, 220, 0.5);
        font-size: 14px;
        color: #3A3A3A;
      }

      .add-btn {
        flex: 1;
        height: 47px;
        background: linear-gradient(221deg, #7ED785 0%, #64C367 100%);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        font-size: 14px;
        color: #FFFFFF;
      }
    }

  }

    .pass{
      width: 100vw;
      height: 7vh;
      line-height: 7vh;
      border-bottom:1px solid #B8B8B8;
      display: flex;
    }
    .pass_text{
      width: 20vw;
      height: 7vh;
      text-align: left;
      color: #3A3A3A;
      padding-left: 5vw;
    }
    .pass_input{
      width: 70vw;
      border:none;
      outline:none;
    }
</style>
